<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码变更影响与测试范围分析</title>
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/dita.css">
    <style>

    </style>
    <script src="js/crypto-js.min.js"></script>
    <script src="js/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
</head>
<body>
    <!-- 左侧导航栏 -->
    <div class="sidebar">
        <div class="logo">
            <h1> <span>DevAnalytics</span></h1>
        </div>
        <div class="menu">
            <div class="menu-item active" data-target="impact">
                <i class="fas fa-diagram-project"></i>
                <span>代码影响关系图</span>
            </div>
            <div class="menu-item" data-target="analysis">
                <i class="fas fa-vial"></i>
                <span>测试案例关联分析</span>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">


        <div class="content-area">

            <!-- 默认显示空状态 -->
            <div class="empty-state" id="emptyState">
                <div class="impact-container">
                    Git URL: <input type="text"> 代码分支名称: <input type="text">First Commit ID: <input type="text">Second Commit ID: <input type="text"> <button>生成JCCI文件</button>
                </div>
                <div>手动选择：
                    <input type="file" id="datafile">
              <!--      展示方式-->
              <!--      <select id="select">-->
              <!--        <option value="tree">树形图</option>-->
              <!--        <option value="graph">关系图</option>-->
              <!--      </select>-->
                  </div>

                  <div id="main" style="width: 100%;height: 800px;"></div>
            </div>

            <!-- 测试案例关联分析 -->
            <div class="analysis-container" id="analysisContainer">
                <div class="class-methods-panel">
                    <div class="panel-header">
                        <h3>代码变更影响分析</h3>

                    </div>

                    <div class="table-container">
                        <table id="classMethodsTable">
                            <thead>
                                <tr>
                                    <th>Class类及方法</th>
                                    <th>代码注释</th>
                                    <th>父级1</th>
                                    <th>父级2</th>
                                    <th>父级3</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 数据将通过JavaScript填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="test-cases-panel">
                    <div class="panel-header">
                        <h3>测试案例</h3>
                        <div>

                            <button class="btn btn-outline" style="margin-left: 8px;">
                                <i class="fas fa-download"></i> 导出
                            </button>
                        </div>
                    </div>
                    <div class="table-container">
                        <table id="testCasesTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>一级分类</th>
                                    <th>二级分类</th>
                                    <th>三级分类</th>
                                    <th>四级分类</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 数据将通过JavaScript填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const classMethodsData = [
            { id: 1, classNameMethod: "UserService.createUser", parent1: "UserService.createUser", parent2: "UserService.createUser", parent3: "UserService.createUser",note: "创建新用户" },
            { id: 2, classNameMethod: "UserService.updateUser", parent1: "UserService.updateUser", parent2: "UserService.updateUser", parent3: "UserService.updateUser", note: "更新用户信息" },
            { id: 3, classNameMethod: "UserService.deleteUser", parent1: "UserService.deleteUser", parent2: "UserService.deleteUser", parent3: "UserService.deleteUser", note: "删除用户" },
            { id: 4, classNameMethod: "ProductService.addProduct", parent1: "ProductService.addProduct", parent2: "ProductService.addProduct", parent3: "ProductService.addProduct", note: "添加新产品" }

        ];

        const testCasesData = [
            { id: 101, title: "创建普通用户测试", classId: 1, 
              category1: "用户管理", category2: "用户创建", category3: "普通用户", category4: "成功场景" },
            { id: 102, title: "创建管理员用户测试", classId: 1, 
              category1: "用户管理", category2: "用户创建", category3: "管理员", category4: "成功场景" },
            { id: 103, title: "用户信息更新测试", classId: 2, 
              category1: "用户管理", category2: "用户更新", category3: "基本信息", category4: "成功场景" },
            { id: 104, title: "用户权限更新测试", classId: 2, 
              category1: "用户管理", category2: "用户更新", category3: "权限管理", category4: "成功场景" },
            { id: 105, title: "添加标准产品测试", classId: 4, 
              category1: "产品管理", category2: "产品添加", category3: "标准产品", category4: "成功场景" },
            { id: 106, title: "添加特殊产品测试", classId: 4, 
              category1: "产品管理", category2: "产品添加", category3: "特殊产品", category4: "边界测试" },
            { id: 107, title: "创建普通订单测试", classId: 6, 
              category1: "订单管理", category2: "订单创建", category3: "普通订单", category4: "成功场景" },
            { id: 108, title: "创建VIP订单测试", classId: 6, 
              category1: "订单管理", category2: "订单创建", category3: "VIP订单", category4: "成功场景" },
            { id: 109, title: "支付处理测试", classId: 8, 
              category1: "支付管理", category2: "支付处理", category3: "信用卡", category4: "成功场景" },
            { id: 110, title: "用户登录验证测试", classId: 9, 
              category1: "认证管理", category2: "用户登录", category3: "凭证验证", category4: "成功场景" }
        ];

        // DOM元素
        const menuItems = document.querySelectorAll('.menu-item');
        const emptyState = document.getElementById('emptyState');
        const analysisContainer = document.getElementById('analysisContainer');
        const classMethodsTable = document.querySelector('#classMethodsTable tbody');
        const testCasesTable = document.querySelector('#testCasesTable tbody');

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            renderClassMethodsTable();
            
            // 添加菜单点击事件
            menuItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 更新活动菜单项
                    menuItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    const target = this.getAttribute('data-target');
                    
                    if (target === 'impact') {
                        // 显示代码影响关系图（空状态）
                        emptyState.style.display = 'flex';
                        analysisContainer.style.display = 'none';
                    } else if (target === 'analysis') {
                        // 显示测试案例关联分析
                        emptyState.style.display = 'none';
                        analysisContainer.style.display = 'flex';
                    }
                });
            });
        });

        // 渲染类方法表格
        function renderClassMethodsTable() {
            classMethodsTable.innerHTML = '';
            
            classMethodsData.forEach(item => {
                const row = document.createElement('tr');
                
                row.innerHTML = `
                    <td>
                        <div><strong>${item.classNameMethod}</strong></div>
                    </td>
                    <td>${item.note}</td>
                    <td>${item.parent1}</td>
                    <td>${item.parent2}</td>
                    <td>${item.parent3}</td>
                    
                    <td>
                        <button class="btn btn-primary test-case-btn" data-id="${item.id}">
                            测试案例
                        </button>
                    </td>
                `;
                
                classMethodsTable.appendChild(row);
            });
            
            // 添加测试案例按钮事件
            document.querySelectorAll('.test-case-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const classId = parseInt(this.getAttribute('data-id'));
                    renderTestCasesTable(classId);
                });
            });
        }

        // 渲染测试案例表格
        function renderTestCasesTable(classId) {
            testCasesTable.innerHTML = '';
            
            // 过滤测试案例
            const filteredTestCases = testCasesData.filter(testCase => testCase.classId === classId);
            
            if (filteredTestCases.length === 0) {
                testCasesTable.innerHTML = `
                    <tr>
                        <td colspan="7" style="text-align: center; padding: 40px; color: #6c757d;">
                            <i class="fas fa-inbox" style="font-size: 3rem; margin-bottom: 15px; display: block;"></i>
                            未找到关联的测试案例
                        </td>
                    </tr>
                `;
                return;
            }
            
            filteredTestCases.forEach(testCase => {
                const row = document.createElement('tr');
                
                row.innerHTML = `
                    <td>${testCase.id}</td>
                    <td><strong>${testCase.title}</strong></td>
                    <td><span class="category-badge">${testCase.category1}</span></td>
                    <td><span class="category-badge">${testCase.category2}</span></td>
                    <td><span class="category-badge">${testCase.category3}</span></td>
                    <td><span class="category-badge">${testCase.category4}</span></td>
                    <td>

                        删除
                    </td>
                `;
                
                testCasesTable.appendChild(row);
            });
        }

        
    </script>


    <script type="text/javascript">
        var cciFile = document.getElementById('datafile');
        var myChart = echarts.init(document.getElementById('main'));
        var graphData = []
        var graphLinks = []
        var graphCategories = []
  
        var optionGraph = {
          tooltip: {},
          legend: [
            {
              data: [],
              type: 'scroll',
              orient: 'horizontal'
            }
          ],
          series: [
          {
            type: 'graph',
            layout: 'none',
            data: [],
            links: [],
            categories: [],
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            roam: true,
            labelLayout: {
              hideOverlap: true
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            }
          }]
        }
  
        function readInputFile(event) {
          let file = event.target.files[0];
          if (!file) {
            return;
          }
          let reader = new FileReader();
  
          reader.addEventListener('load', event => {
            let content = event.target.result;
            let covertData = JSON.parse(content)
            optionGraph.series[0].data = covertData.nodes
            optionGraph.series[0].links = covertData.links
            graphCategories = covertData.categories
            optionGraph.series[0].categories = graphCategories
            let graphLegend = graphCategories.map(function (a) {
              return a.name;
            })
            optionGraph.legend[0].data = graphLegend
            myChart.setOption(optionGraph);
          })
          reader.readAsText(file);
        }
  
        cciFile.addEventListener('change', readInputFile, false);
      </script>
</body>
</html>